<%@ page contentType="text/html;charset=UTF-8" language="java" %> <%@ page isELIgnored="false" %>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<%
    String path = request.getContextPath();
    String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<div id="page-content">
    <div class="row">
        <div class="fixed-fluid">


            <div class="fixed-sm-200 fixed-md-250 pull-sm-left">
                <div class="panel">
                    <div class="pad-all bord-btm">
                        <button id="btn_add_dict" class="btn btn-block btn-success"><i class="ti-plus"></i> 新增字典</button>
                    </div>
                    <p class="pad-hor mar-top text-main text-bold">字典列表</p>
                    <div id="dict_list" class="list-group bord-no">

                    </div>
                </div>
            </div>


            <div class="fluid">
                <div id="dictitem_panel" class="panel">
                    <div class="panel-body">
                        <h1 id="title_dict_selected" class="page-header text-overflow pad-btm">正在加载...</h1>
                        <div class="form-inline">
                            <div class="row">
                                <div class="col-sm-12 table-toolbar-left">
                                    <button id="btn_add_dictitem" class="btn btn-default"><i class="ti-plus"></i> 添加字典项</button>
                                </div>
                            </div>
                        </div>

                        <div class="table-responsive">
                            <table id="dictitem_list" class="table table-striped">
                                <thead>
                                <tr>
                                    <th style="width:25%">字典项名称</th>
                                    <th style="width:15%">程序使用值</th>
                                    <th style="width:10%">允许禁用</th>
                                    <th style="width:10%">表单可选</th>
                                    <th>自定义排序</th>
                                    <th style="width:25%">操作</th>
                                </tr>
                                </thead>
                                <tbody>

                                </tbody>
                            </table>
                        </div>

                    </div>
                </div>
            </div>


        </div>
    </div>
</div>

<script id="templates_dict_list" type="text/x-jsrender">

    <a href="javascript:void(0);" key="{{:id}}" class="list-group-item">
        {{if ifKey==1}}
            <i class="fa fa-eye-slash icon-lg icon-fw"></i>
        {{else}}
            <i class="fa fa-eye icon-lg icon-fw"></i>
        {{/if}}
        {{:name}}
    </a>

</script>

<script id="templates_dictitem_list" type="text/x-jsrender">
    <tr id="{{:id}}" dictId="{{:dictId}}">
        <td class="inbox-data-from">
		    <p class="text-main">
                {{if state=='Enable'}}
                    <i class="ti-check"></i>
                {{else state=='Disenable'}}
                    <i class="ti-close"></i>
                {{/if}}
			    {{:name}}
		    </p>
            {{if description!=''}}
                <p>
                    【说明】{{:description}}
                </p>
            {{/if}}
        </td>
        <td>
            <div>
                {{:value}}
            </div>
        </td>
        <td>
            <div>
                {{if ifKey==1}}
                    <i class="ti-close"></i>
                {{else}}
                    <i class="ti-check"></i>
                {{/if}}
            </div>
        </td>
        <td>
            <div>
                {{if ifSelectable==1}}
                    <i class="ti-close"></i>
                {{else}}
                    <i class="ti-check"></i>
                {{/if}}
            </div>
        </td>
        <td>
            <div>
                {{:sortNo}}
            </div>
        </td>
        <td>
            <div>
                <a href="javascript:void(0);" key="dictitem_action_edit_{{:id}}" class="btn btn-default btn-sm" onclick="fn_dictitem_edit('{{:id}}');"><i class="fa fa-lg fa-edit"></i>编辑</a>
                {{if state=='Enable'}}
                    <a href="javascript:void(0);" key="dictitem_action_disabled_{{:id}}" class="btn btn-warning btn-sm" onclick="fn_dictitem_method('Disenable', '{{:id}}');"><i class="fa fa-lg fa-ban"></i> 禁用</a>
                {{else state=='Disenable'}}
                    <a href="javascript:void(0);" key="dictitem_action_enable_{{:id}}" class="btn btn-success btn-sm" onclick="fn_dictitem_method('Enable', '{{:id}}');"><i class="fa fa-lg fa-check-circle-o"></i> 启用</a>
                {{/if}}
            </div>
        </td>
    </tr>
</script>

<script type="text/javascript">

    // 当前选中系统字典ID
    var current_dictId='';
    fn_dict_title('系统字典');

    $(function (){

        //加载系统字典列表
        fn_dict_list_load();

    });

    function fn_dict_list_load() {
        var $templates =  $.templates('#templates_dict_list');
        var $container = $('#dict_list');
        var url = '<%=path%>/main/dict/list';
        __ajax_get(url, null, function(data) {
            if (data.state == 1) {
                var entity = data.data;

                // 初始化模板
                if (entity) {
                    // 初始化模板
                    var html  = $templates.render(entity);
                    $container.html(html);
                } else {
                    $container.html('');
                }

                // 点击事件
                $('#dict_list > a').click(function() {
                    var dictId = $(this).attr('key');
                    fn_dict_click(dictId);
                    return false;
                });

                if (current_dictId) {
                    fn_dict_click(current_dictId);
                } else {
                    // 默认选中第一个字典
                    var $first_dict_a = $('#dict_list > a:first');
                    if ($first_dict_a) {
                        var dictId = $first_dict_a.attr('key');
                        fn_dict_click(dictId);
                    }
                }

            }
        });
    }

    function fn_dict_click(dictId) {
        var $current_dict_a = $('#dict_list > a[key='+dictId+']');
        // 移除其他 li 选中状态
        $('#dict_list > a.active').removeClass('active');
        // 当前 li 选中状态
        $current_dict_a.addClass('active');
        // 设置标题
        fn_dict_title($current_dict_a.text(), dictId);
        // 初始化字典项列表
        fn_dictitem_list_load(dictId);
    }

    function fn_dictitem_list_load(dictId) {
        current_dictId = dictId;
        var $templates =  $.templates('#templates_dictitem_list');
        var $container = $('#dictitem_list > tbody');
        var url = '<%=path%>/main/dictitem/list?dictId=' + dictId;

        $('#dictitem_panel').panelOverlay({
            title: '加载中...'
        });

        __ajax_get(url, null, function (data) {
            if (data.state == 1) {
                var entity = data.data;

                // 初始化模板
                if (entity) {
                    var html  = $templates.render(entity);
                    $container.html(html);
                } else {
                    $container.html('');
                }
            }
        },{
            beforeSend: function(){
                $('#dictitem_panel').panelOverlay('show');
            },
            complete: function(){
                $('#dictitem_panel').panelOverlay('hide');
            }
        });
    }

    $('#dict_list_refresh').click(function () {

        // 刷新列表
        fn_dict_list_load();

        return false;
    });

    function fn_dict_title(title, id) {
        $('#title_dict_selected').html(
                title +
                '<a class="btn btn-default btn-xs" href="javascript:fn_dict_edit(\''+id+'\');">'+
                '<i class="ti-pencil"></i>'+
                '</a>');
    }

    //新建系统字典
    $('#btn_add_dict').click(function () {
        __open_dialog_form('新建系统字典', '<%=basePath%>/main/dict/create', function (dialogRef) {
            var callback = function (data) {
                if (data) {
                    dialogRef.close();

                    //刷新
                    current_dictId = data.id;
                    fn_dict_list_load();
                } else {
                    dialogRef.enableButtons();
                }
            };
            if (fn_dict_input_save(callback) === false) {
                dialogRef.enableButtons();
            }
        });
    });

    function fn_dict_edit(dictId) {
        if (dictId) {
            __open_dialog_form('编辑系统字典', '<%=basePath%>/main/dict/update/'+dictId, function (dialogRef) {
                var callback = function (data) {
                    if (data) {
                        dialogRef.close();

                        //刷新
                        fn_dict_list_load();
                    } else {
                        dialogRef.enableButtons();
                    }
                };

                if (fn_dict_input_save(callback) === false) {
                    dialogRef.enableButtons();
                }
            });
        } else {
            __toastr_error('请先选择系统字典');
        }
    }

    //新增字典item
    $('#btn_add_dictitem').click(function () {
        if (current_dictId) {
            __open_dialog_form('新建系统字典项', '<%=basePath%>/main/dictitem/create?dictId='+current_dictId, function (dialogRef) {
                var callback = function (data) {
                    if (data) {
                        dialogRef.close();

                        //刷新
                        fn_dictitem_list_load(current_dictId);
                    } else {
                        dialogRef.enableButtons();
                    }
                };

                if (fn_dictitem_input_save(callback) === false) {
                    dialogRef.enableButtons();
                }
            });
        } else {
            __toastr_error('请先选择系统字典');
        }
    });

    function fn_dictitem_edit(dictitemId) {
        if (dictitemId) {
            __open_dialog_form('编辑系统字典项', '<%=basePath%>/main/dictitem/update/'+dictitemId, function (dialogRef) {
                var callback = function (data) {
                    if (data) {
                        dialogRef.close();

                        //刷新
                        fn_dictitem_list_load(current_dictId);
                    } else {
                        dialogRef.enableButtons();
                    }
                };

                if (fn_dictitem_input_save(callback) === false) {
                    dialogRef.enableButtons();
                }
            });
        } else {
            __toastr_error('请先选择系统字典项');
        }
    }

    function fn_dictitem_method(method, id) {
        var message = '确定执行此操作么';
        if (method == 'Enable') {
            message = '确定启用么';
        } else if (method == 'Disenable') {
            message = '确定禁用么';
        }
        __confirm_dialog(null, message,
                function () {
                    var url = '<%=path%>/main/dictitem/method/'+method+'/'+id;
                    __ajax_post(url, null, function(data) {
                        __toastr(data);
                        if(data.state == 1) {
                            // 刷新
                            fn_dictitem_list_load(current_dictId);
                        }
                    });
        });
    }

</script>
